{% extends 'home/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/public//css/detail.css">
<link rel="stylesheet" type="text/css" href="/static/home/public//css/detail-app.css">
{% endblock %}



{% block con %}
<br><br><br><br>
<div class="page-detail app-detail">
	<div class="container">
	  	<!-- 面包屑 导航 -->
		<div class="ml-nav hidden-xs hidden-sm">
			<ol class="breadcrumb">
			  <li><a href="{% url 'index' %}">首页</a></li>
			  <li><a href="{% url 'list' data.typeid.id %}">{{ data.typeid.name }}</a></li>
			  <li><a href="{% url 'info' data.id  %}"> {{ data.title }}</a></li>
			</ol>
		</div>
	 	<!-- 面包屑 导航 E-->

		<!-- 产品购买 -->
		<div class="row">
			<div class="col-md-5 col-sm-12 col-xs-12">
				<div class="preview">
				  	<!-- Tab panes -->
					<div class="tab-content preview-booth pt10">
						<div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
						  	<img src="{{ data.pic }}" style="width:300px;height:300px;" class="sImg">
						</div>
					</div>
				</div>
			</div>
		  	<div class="col-md-7 col-sm-12 col-xs-12 pt10">
		    <div class="property hidden-xs hidden-sm" id="property">
				<div class="property-hd">
				   <h1>{{ data.title }}</h1>
				   <p class="mod-info active">所属分类：{{ data.typeid.name }} </p>
				</div>
				<div class="property-sell">
					<dl class="property-sell-price clearfix">
						<dt class="vm-metatit" id="J_discountTag">价<span class="s-space"></span><span class="s-space"></span>格：
						</dt>
						<dd>
						 <div class="mod-price">
						     <small>¥</small>
						     <span id="J_price" class="vm-money">{{ data.price }}</span>
						 </div>
						 <div class="mod-original" id="J_originalPrice" style="display:none;"></div>
						 <div class="mod-activity">
						 </div>
						 <div class="mod-countdown" id="J_discountCountDown" style="display:none;">
						 </div>
						</dd>
					</dl>
				</div>

				<div class="property-buy">
					<p class="vm-message" id="J_message"></p>

					<dl class="property-buy-quantity">
					    <dt class="vm-metatit">数<span class="s-space"></span><span class="s-space"></span>量：</dt>
					    <dd class="clearfix">
					        <div class="mod-control">
					           <a title="减少" href="javascript:;" class="vm-minus disabled">-</a>
					           <input value="1" id="J_quantity" data-max="5" type="text">
					           <a title="增加" href="javascript:;" class="vm-plus">+</a>
					        </div>
					    </dd>
					</dl>

					<div class="property-buy-action">
					    <a data-mtype="store_de_buy" href="javascript:void(0);" id="J_btnBuy" class="btn btn-danger btn-lg mr20">立即购买</a>
					    <a data-mtype="store_de_cart" href="javascript:void(0);" gid="{{ data.id }}" id="J_btnAddCart" class="btn btn-danger btn-lg " style="display:inline-block;"><i></i>加入购物车</a>
					    <span class="vm-service" id="J_panicBuyingWrap"></span>
					</div>
					<script type="text/javascript">
						// 点击加入购物车 将商品id 和商品数量 发送到后台记录
						$('#J_btnAddCart').click(function(){

							gid = $(this).attr('gid')
							num = $('#J_quantity').val()

							// 发送ajax请求 加入购物车
							$.get('{% url "cartadd" %}',{gid:gid,num:num},function(data){
								alert(data['msg']);
							},'json');
						});
					</script>



				</div>

		    </div>   

		  </div>
		</div>
		<!-- 产品购买 E-->

	</div>
	<!-- 漂浮的导航 -->
<!-- 	<div class="detail-tab anim detail-fast-float float-nav" id="detailFast">
	    <div class="fixed-container">
	        <ul class="clearfix">
	            <li class="">
	                <a href="javascript:void(0);">商品详情</a>
	            </li>
	            <li class="">
	                <a href="javascript:void(0);">规格参数</a>
	            </li>
	                <li class="current">
	                    <a href="javascript:void(0);">常见问题</a>
	                </li>
	        </ul>
	        <div class="shortcut trans">
	            <div class="shortcut-con trans">
	                <div class="mod-buy">
	                    <a data-mtype="store_de_buynow" href="javascript:void(0);" id="J_btnBuyShortcut" class="btn btn-primary btn-lg"><i></i>现在购买</a>
	                </div>
	                <div class="mod-total trans">
	                魅蓝 X<em class="vm-price" id="J_totalPriceShortcut">￥2998.00</em>
	                    <p class="vm-title" id="J_summaryName">全网通公开版 珠光白 32GB</p>
	                </div>
	            </div>
	        </div>
	        <div class="mod-title">

	        </div>
	    </div>
	</div> -->
	<!-- 漂浮的导航 E-->
	<!-- 产品详情 -->
	<div class="row detail" id="detail">
	  <div class="detail" style="height:62px;">
	    <div class="detail-tab" id="detailTabFixed">
	      <div class="fixed-container">
	        <ul class="clearfix" style="display: block;">
	            <li class="current">
	                <a data-mtype="store_de_xq_1" href="javascript:void(0);">商品详情</a>
	            </li>
<!-- 	            <li class="">
	                <a data-mtype="store_de_xq_2" href="javascript:void(0);">规格参数</a>
	            </li>
	            <li class="">
	                <a data-mtype="store_de_xq_3" href="javascript:void(0);">常见问题</a>
	            </li> -->
	        </ul>
	      </div>
	    </div>
	  </div>
	  <div class="detail-content container">
	      <div class="introduce current" id="introduce">
	          {{ data.info|safe }}
	      </div>
	      <!-- 移动端图片 -->

	      <div class="standard" id="standard">
	          <table class="standard-table">
	              <tbody>
	                  <tr class="standard-table-group">
	                      <th colspan="2">
	                          基础信息
	                      </th>
	                  </tr>
	                  <tr> 
	                      <th> 品牌 </th> 
	                      <td> 魅族 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 型号 </th> 
	                      <td> 魅蓝 X </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 尺寸 </th> 
	                      <td> 153.8*76*7.4mm </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 电池容量 </th> 
	                      <td> 3200mAh </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 重量 </th>
	                      <td> 165g </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> <th colspan="2"> 屏幕 </th> 
	                  </tr> <tr> <th> 屏幕尺寸 </th> <td> 5.5英寸 </td> </tr> 
	                  <tr> <th> 对比度 </th> <td> 1500:1 </td> </tr> <tr> 
	                  <th> 分辨率 </th> <td> 1920×1080 </td> </tr> <tr> 
	                  <th> PPI </th> <td> 403 </td> </tr> <tr> 
	                  <th> 亮度 </th> <td> 450cd/m²（典型值） </td> </tr> 
	                  <tr> <th> 显示技术 </th> <td> TDDI </td> </tr> 
	                  <tr> <th> 制造工艺 </th> <td> Full Incell </td> </tr>
	                   <tr class="standard-table-group"> <th colspan="2"> 容量 </th> 
	                   </tr> 
	                   <tr> 
	                      <th> 运行内存（RAM） </th> 
	                      <td> 3GB(仅限32G版本)、4GB(仅限64G版本) </td> 
	                  </tr> 
	                  <tr>    
	                      <th> 机身内存 </th> 
	                      <td> 32GB<br>64GB </td> 
	                  </tr>
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 处理器 </th> 
	                  </tr>
	                  <tr> 
	                      <th> CPU </th> 
	                      <td> Helio P20 处理器 </td>
	                  </tr>
	                  <tr> 
	                      <th> GPU </th> 
	                      <td> ARM Mali-T880 图形处理器 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> CPU频率 </th> 
	                      <td> ARM®Cortex®-A53™2.3GHz x4 +<br>ARM®Cortex®-A53™1.6 GHz x 4 </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 摄像 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 前置摄像头 </th> 
	                      <td> ƒ/2.0 光圈<br>5 片式镜头<br>ArcSoft®美颜算法 自适应美肤技术<br>Face AE 脸部亮度智能调节<br>500万像素 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 后置摄像头 </th>
	                      <td> 1200万像素<br>6 片式镜头<br>PDAF 相位对焦 急速抓拍<br>ƒ/2.0 大光圈虚化<br>连拍模式<br>全景模式<br>双色温双闪光灯 补光自然柔和 </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> mTouch </th>
	                  </tr> 
	                  <tr> 
	                      <th> 响应速度 </th> 
	                      <td> 0.2s </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 识别角度 </th> 
	                      <td> 360° </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 指纹组数 </th> 
	                      <td> 5组 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> mTouch版本 </th> 
	                      <td> 2.1 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> mTouch传感器 </th> 
	                      <td> 电容式触摸传感器 </td> 
	                  </tr> 
	                  <tr class="standard-table-group">   
	                      <th colspan="2"> 运营商与制式 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 全网通 </th> 
	                      <td> 全网通（公开版、电信版）<br>移动 4G TD-LTE<br>联通/电信 4G TD/FDD-LTE<br>移动 3G TD-SCDMA<br>联通 3G WCDMA<br>电信 3G EVDO<br>移动/联通 2G GSM<br>电信 2G CDMA </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 其他参数 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> WLAN功能 </th> 
	                      <td> 支持 5GHz 和 2.4GHz 频段<br>802.11 a/b/g/n 无线网络 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 蓝牙 </th> 
	                      <td> Bluetooth 4.1 </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 多媒体 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 视频 </th> 
	                      <td> 支持 MP4、3GP、MOV、MKV、AVI、FLV、MPEG 视频格式 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 音频 </th> 
	                      <td> 支持 FLAC、APE、AAC、MKA、OGG、MIDI、M4A、AMR 音频格式 </td>
	                  </tr> 
	                  <tr> 
	                      <th> 图片 </th> 
	                      <td> 支持 JPEG、PNG、GIF、BMP 图片格式 </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 系统与应用 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 系统版本 </th> 
	                      <td> Flyme 5 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 传感器 </th> 
	                      <td> 霍尔磁感应<br>重力感应<br>红外距离感应<br>陀螺仪<br>环境光度感应<br>触摸感应<br>电子罗盘 </td> 
	                  </tr> 
	                  <tr> 
	                      <th> 导航定位 </th> 
	                      <td> GPS<br>A-GPS<br>GLONASS<br>电子罗盘 </td>
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 操作环境 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 操作环境 </th> 
	                      <td> 工作环境温度&nbsp;-15 至 55°C<br>非工作温度&nbsp;-40 至 70°C<br>相对湿度&nbsp;95%<br>工作高度&nbsp;高达 5000 米 </td> 
	                  </tr> 
	                  <tr class="standard-table-group"> 
	                      <th colspan="2"> 包装清单 </th> 
	                  </tr> 
	                  <tr> 
	                      <th> 包装清单 </th> 
	                      <td> 主机 x 1<br>电源适配器 x 1<br>保修证书 x 1<br>SIM卡顶针 x 1<br>数据线 x 1 </td> 
	                  </tr>                   
	              </tbody>
	          </table>
	      </div>
	      <div class="question" id="question">
	        <div class="question-list hidden-xs hidden-sm">
	            <h2>热门回答</h2>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 的屏幕尺寸是多大？有哪几种颜色？机身材质？
	                    </dt>
	                    <dd class="vm-answer">
	                        5.5 英寸，幻影蓝、流光金、曜石黑、珠光白，双 2.5D 玻璃。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 是否支持指纹识别？
	                    </dt>
	                    <dd class="vm-answer">
	                        支持 mTouch，响应速度达 0.2s，支持移动指纹支付。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 屏幕采用什么技术？
	                    </dt>
	                    <dd class="vm-answer">
	                        夏普 TDDI 屏幕显示触控一体技术，这是迄今为止魅蓝系列最优秀的一块屏幕。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 屏幕对比度和亮度多高？
	                    </dt>
	                    <dd class="vm-answer">
	                        1500:1 对比度丨450cd/m²典型值亮度，500cd/m²峰值亮度。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 支持的网络有哪些？是否具备 VoLTE 语音通话技术？
	                    </dt>
	                    <dd class="vm-answer">
	                        魅蓝 X 全网通版可支持中国移动、中国联通、中国电信三大运营商网络。不可同时支持两张电信卡。支持 VoLTE 高清通话。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 的 CPU 是用什么？
	                    </dt>
	                    <dd class="vm-answer">
	                        全新 Helio P20 16nm 制程低功耗处理器。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 的运行内存是多少？
	                    </dt>
	                    <dd class="vm-answer">
	                        搭载 LPDDR4X 高速低功耗大内存。32G 容量版本配备 3G 运行内存，64G 容量版本配备 4G 运行内存。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 后置摄像头是多少像素？采用哪颗 CMOS？ 
	                    </dt>
	                    <dd class="vm-answer">
	                        1200 万像素，索尼 IMX386 CMOS，搭载 PDAF 高速相位对焦，ƒ/2.0 大光圈虚化。
	                    </dd>
	                </dl>
	                <dl class="mod-item">
	                    <dt class="vm-question">
	                    魅蓝 X 的电池规格？是否支持 mCharge 安全快充？是否配备 Type-C 接口？
	                    </dt>
	                    <dd class="vm-answer">
	                        3200 mAh 典型值，支持mCharge，安全快充峰值功率高达 18W，配备 Type-C接口。
	                    </dd>
	                </dl>
	        </div>
	        <div class="app-question-list">
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 的屏幕尺寸是多大？有哪几种颜色？机身材质？
	                      </dt>
	                      <dd class="vm-answer">
	                      5.5 英寸，幻影蓝、流光金、曜石黑、珠光白，双 2.5D 玻璃。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 是否支持指纹识别？
	                      </dt>
	                      <dd class="vm-answer">
	                      支持 mTouch，响应速度达 0.2s，支持移动指纹支付。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 屏幕采用什么技术？
	                      </dt>
	                      <dd class="vm-answer">
	                      夏普 TDDI 屏幕显示触控一体技术，这是迄今为止魅蓝系列最优秀的一块屏幕。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 屏幕对比度和亮度多高？
	                      </dt>
	                      <dd class="vm-answer">
	                      1500:1 对比度丨450cd/m²典型值亮度，500cd/m²峰值亮度。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 支持的网络有哪些？是否具备 VoLTE 语音通话技术？
	                      </dt>
	                      <dd class="vm-answer">
	                      魅蓝 X 全网通版可支持中国移动、中国联通、中国电信三大运营商网络。不可同时支持两张电信卡。支持 VoLTE 高清通话。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 的 CPU 是用什么？
	                      </dt>
	                      <dd class="vm-answer">
	                      全新 Helio P20 16nm 制程低功耗处理器。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 的运行内存是多少？
	                      </dt>
	                      <dd class="vm-answer">
	                      搭载 LPDDR4X 高速低功耗大内存。32G 容量版本配备 3G 运行内存，64G 容量版本配备 4G 运行内存。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 后置摄像头是多少像素？采用哪颗 CMOS？ 
	                      </dt>
	                      <dd class="vm-answer">
	                      1200 万像素，索尼 IMX386 CMOS，搭载 PDAF 高速相位对焦，ƒ/2.0 大光圈虚化。
	                      </dd>
	                  </dl>
	                  <dl class="mod-item">
	                      <dt class="vm-question">
	                      魅蓝 X 的电池规格？是否支持 mCharge 安全快充？是否配备 Type-C 接口？
	                      </dt>
	                      <dd class="vm-answer">
	                      3200 mAh 典型值，支持mCharge，安全快充峰值功率高达 18W，配备 Type-C接口。
	                      </dd>
	                  </dl>
	          </div>
	      </div>
	  </div>
	</div><!-- 产品详情 E-->

</div>





{% endblock %}

{% block js %}
    <script type="text/javascript">
      //顶部导航鼠标经过出现内容
      // topNav();
      //登录图片鼠标经过
      topLogin();
      //nav标签
      detaNav();
      //回顶部
      backTop();
      //移动端置顶
      appTopNav();
      //数量增加减少 
      addMin();
    </script>
{% endblock %}
